<template>
  <el-dialog v-model="dialogVisible" :width="800" title="设置数据权限">
    <el-tabs :model-value="data.moduleType" @tab-change="tabChange">
      <el-tab-pane
        v-for="item in moduleTypeOptions"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="m-form">
      <div class="el-form-item is-required asterisk-left">
        <div class="el-form-item__label-wrap">
          <label class="el-form-item__label" style="width: auto"
            >数据权限:</label
          >
        </div>
        <div class="el-form-item__content">
          <MSelect
            placehilder="请选择"
            :options="dataScopeOptions"
            v-model="data.dataScope"
          ></MSelect>
        </div>
      </div>
      <div
        v-show="data.dataScope === 2"
        class="el-form-item is-required asterisk-left"
      >
        <div class="el-form-item__label-wrap">
          <label class="el-form-item__label" style="width: auto"
            >组织架构:</label
          >
        </div>
        <div class="el-form-item__content">
          <MTreeSelect
            placehilder="请选择(可多选)"
            :data="deptData"
            :fields="{
              value: 'id',
              label: 'label',
              children: 'children'
            }"
            :multiple="true"
            :showCheckbox="true"
            :default-expanded-keys="data.deptIds"
            v-model="data.deptIds"
          ></MTreeSelect>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { saveOrUpdateDataScope, getDataScope } from '@/api/system/role'
import { treeList } from '@/api/system/user'
import { dataScopeOptions, moduleTypeOptions } from './config'
import { useTreeHandler, TreeHandler } from '@/hooks'

defineOptions({
  name: 'Demo'
})

let treeHandler: TreeHandler

const deptData = ref([])
treeList().then((res: any) => {
  deptData.value = res.data
  treeHandler = useTreeHandler(res.data)
})

const data = reactive<any>({
  roleId: undefined,
  moduleType: undefined,
  dataScope: undefined,
  deptIds: []
})

const tabChange = (value: any) => {
  getDataScope({
    roleId: data.roleId,
    moduleType: value
  }).then((res) => {
    data.moduleType = value

    const { dataScope, deptIds } =
      res.data.dataScopes?.find((item: any) => item.moduleType === value) || {}
    data.dataScope = dataScope ? Number(dataScope) : dataScope
    data.deptIds = treeHandler.getLeftNode(deptIds || [])
  })
}

const dialogVisible = ref(false)
const show = (id: number) => {
  data.roleId = id
  tabChange(moduleTypeOptions[0].value)

  dialogVisible.value = true
}

const submit = () => {
  if (!data.dataScope) {
    return ElMessage.warning('请选择数据权限')
  }
  // 自定义数据
  if (data.dataScope === 2 && !data.deptIds) {
    return ElMessage.warning('请选择组织架构')
  } else if (data.dataScope !== 2) {
    data.deptIds = undefined
  }

  if (Array.isArray(data.deptIds)) {
    data.deptIds = treeHandler.getSelected(data.deptIds)
  }

  saveOrUpdateDataScope(data).then(() => {
    ElMessage.success('保存成功')
    // tabChange(data.moduleType)
    dialogVisible.value = false
  })
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-tabs {
  :deep(.el-tabs__header) {
    background-color: #fafafa !important;
    border: 1px solid #e4e7ed;
  }
}
</style>
